<template>
  <div>
    <div
      style="border: 2px solid skyblue;margin: 20px auto;width:20%;text-align:center;font-size:40px;background:skyblue"
    >个人中心</div>
    <div class="content" style="display:flex;flex-direction:column">
      <!-- <div style="margin:10px">
        <el-button
          type="text"
          @click="centerDialogVisible = true"
          style="color:black;border:1px solid black;width:100px;background:skyblue;font-size:15px;float:right;"
        >添加</el-button>
        <el-dialog title="学号和姓名为必填项" :visible.sync="centerDialogVisible" width="40%" center>
          <span style="margin-left:150px;display:flex;flex-direction:column;">
            <span>
              学号:
              <input v-model="addInfo.code" id="addInp1" />
              <br />
              <br />
              <span></span>姓名:
              <input v-model="addInfo.name" id="addInp2" />
              <br />
              <br />
            </span>
            <span>
              身份:
              <input v-model="addInfo.identity" id="addInp3" />
              <br />
              <br />
            </span>
            <span>
              班级:
              <input v-model="addInfo.grade" id="addInp4" />
              <br />
              <br />
            </span>
            <span>
              性别:
              <input v-model="addInfo.sex" id="addInp5" />
              <br />
              <br />
            </span>
            <span>
              年龄:
              <input v-model="addInfo.age" id="addInp6" />
              <br />
              <br />
            </span>
            <span>
              电话:
              <input v-model="addInfo.del" id="addInp7" />
              <br />
              <br />
            </span>
            <span>
              生源地:
              <input v-model="addInfo.address" id="addInp8" />
              <br />
              <br />
            </span>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button @click="add">确 定</el-button>
          </span>
        </el-dialog>
      </div>-->
      <div style="margin-top:10px">
        <table style="width:100%;border-collapse:collapse;text-algin:center;" border="1px">
          <tr>
            <th>学号</th>
            <th>名字</th>
            <th>身份</th>
            <th>班级</th>
            <th>性别</th>
            <th>年龄</th>
            <th>电话</th>
            <th>生源地</th>
            <th>操作</th>
          </tr>
          <tr>
            <th>{{personInfo.code}}</th>
            <th>{{personInfo.name}}</th>
            <th>{{personInfo.identity}}</th>
            <th>{{personInfo.grade}}</th>
            <th>{{personInfo.sex}}</th>
            <th>{{personInfo.age}}</th>
            <th>{{personInfo.del}}</th>
            <th>{{personInfo.address}}</th>
            <th>
              <!-- <button style="background-color:skyblue">修改</button> -->
              <el-button
                type="text"
                @click="centerDialogVisible1 = true"
                style="color:black;border:1px solid black;width:60%;background:skyblue;font-size:15px"
              >修改</el-button>
              <el-dialog
                title="姓名为必填项"
                :visible.sync="centerDialogVisible1"
                width="40%"
                center
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
              >
                <span style="margin-left:150px;display:flex;flex-direction:column;">
                  <span>
                    姓名:(修改前:{{personInfo.name}})
                    <input
                      v-model="upDateInfo.name"
                      type="text"
                      id="inp1"
                    />
                    <br />
                    <br />
                  </span>
                  <span>
                    身份:(修改前:{{personInfo.identity}})
                    <!-- <input v-model="upDateInfo.identity" id="inp2" /> -->
                    <el-radio v-model="upDateInfo.identity" label="学生" >学生</el-radio>
                    <el-radio v-model="upDateInfo.identity" label="教师" >教师</el-radio>
                    <br />
                    <br />
                  </span>
                  <span>
                    班级:(修改前:{{personInfo.grade}})
                    <input v-model="upDateInfo.grade" id="inp3" type="text"/>
                    <br />
                    <br />
                  </span>
                  <span>
                    性别:(修改前:{{personInfo.sex}})
                    <!-- <input v-model="upDateInfo.sex" id="inp4" /> -->
                    <el-radio v-model="upDateInfo.sex" label="男" >男</el-radio>
                    <el-radio v-model="upDateInfo.sex" label="女" >女</el-radio>
                    <br />
                    <br />
                  </span>
                  <span>
                    年龄:(修改前:{{personInfo.age}})
                    <input v-model="upDateInfo.age" id="inp5" type="number"/>
                    <br />
                    <br />
                  </span>
                  <span>
                    电话:(修改前:{{personInfo.del}})
                    <input v-model="upDateInfo.del" id="inp6" type="number"/>
                    <br />
                    <br />
                  </span>
                  <span>
                    生源地:(修改前:{{personInfo.address}})
                    <input v-model="upDateInfo.address" id="inp7" type="text"/>
                    <br />
                    <br />
                  </span>
                  <span>学号:(学号不可修改:{{personInfo.code}})</span>
                </span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="centerDialogVisible1 = false">取 消</el-button>
                  <el-button @click="update">确 定</el-button>
                </span>
              </el-dialog>
              <!-- <label>--</label> -->
              <!-- <button style="background-color:red">删除</button> -->
              <!-- <el-button
                type="text"
                @click="centerDialogVisible2 = true"
                style="color:black;border:1px solid black;width:30%;background:red;font-size:15px"
              >删除</el-button>
              <el-dialog title="提示" :visible.sync="centerDialogVisible2" width="40%" center>
                <div>
                  确认删除的学号:
                  <input v-model="deleteInfo.code" type="text" id="dinp1" />
                </div>
                <div slot="footer">
                  <el-button @click="centerDialogVisible2 = false">取 消</el-button>
                  <el-button @click="deleteInfo">确 定</el-button>
                </div>
              </el-dialog>-->
            </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "personInfo",
  data() {
    const coded = sessionStorage.getItem("code");
    return {
      loading: false,
      centerDialogVisible: false,
      centerDialogVisible1: false,
      centerDialogVisible2: false,
      personInfo: {},
      // addInfo: {
      //   code: "",
      //   name: "",
      //   identity: "",
      //   age: "",
      //   grade: "",
      //   del: "",
      //   address: "",
      //   sex: ""
      // },
      upDateInfo: {
        name: "",
        identity: "",
        age: "",
        grade: "",
        del: "",
        address: "",
        sex: "",
        code: coded
      }
      // deleteInfo: {
      //   code: ""
      // }
    };
  },
  mounted() {
    this.getPersonInfo();
  },
  methods: {
    async getPersonInfo() {
      await this.$API
        .call("/home", "get")
        .then(res => {
          this.personInfo = res.data;
        })
        .catch(() => console.log(new Error("failed")));
    },
    async update() {
      this.loading = true;
      const inp1 = document.getElementById("inp1");
      // const inp2 = document.getElementById("inp2");
      const inp3 = document.getElementById("inp3");
      // const inp4 = document.getElementById("inp4");
      const inp5 = document.getElementById("inp5");
      const inp6 = document.getElementById("inp6");
      const inp7 = document.getElementById("inp7");
      if (
        this.upDateInfo.identity &&
        inp3.value &&
        this.upDateInfo.sex &&
        inp5.value &&
        inp6.value &&
        inp7.value &&
        inp1.value != ""
      ) {
        await this.$API
          .call("/upDateStudentInfo", "post", "", this.upDateInfo)
          .then(res => {
            if (res.data != "true") {
              alert("修改失败"),
                (inp1.value = ""),
                (this.upDateInfo.identity = ""),
                (inp3.value = ""),
                (this.upDateInfo.sex = ""),
                (inp5.value = ""),
                (inp6.value = ""),
                (inp7.value = "");
              this.loading = false;
            } else {
              alert("修改成功"), (this.loading = false);
              window.location.reload(true);
            }
          })
          .catch(() => alert("修改失败,请联系管理员"));
      } else {
        alert("必填字段不能为空!"), (this.loading = false);
      }
    }

    // async add() {
    //   const addInp1 = document.getElementById("addInp1");
    //   const addInp2 = document.getElementById("addInp2");
    //   const addInp3 = document.getElementById("addInp3");
    //   const addInp4 = document.getElementById("addInp4");
    //   const addInp5 = document.getElementById("addInp5");
    //   const addInp6 = document.getElementById("addInp6");
    //   const addInp7 = document.getElementById("addInp7");
    //   const addInp8 = document.getElementById("addInp8");
    //   if (addInp1.value && addInp2.value != "") {
    //     await this.$API
    //       .call("/addStudent", "post", "", this.addInfo)
    //       .then(res => {
    //         if (res.data.msg == "false") {
    //           console.log(res);
    //           alert(res.data.msg);
    //           (addInp1.value = ""),
    //             (addInp2.value = ""),
    //             (addInp3.value = ""),
    //             (addInp4.value = ""),
    //             (addInp5.value = ""),
    //             (addInp6.value = ""),
    //             (addInp7.value = ""),
    //             (addInp8.value = "");
    //         } else if (res.data.msg == "true") {
    //           console.log(res);
    //           alert(res.data.msg), window.location.reload();
    //         }
    //       })
    //       .catch(() => {
    //         alert("该学号已存在"), (addInp1.value = "");
    //       });
    //   } else {
    //     alert("必填字段不能为空");
    //   }
    // },
    // async deleteInfo() {
    //   const dinp1 = document.getElementById("dinp1");
    //   if (dinp1.value != "") {
    //     await this.$API
    //       .call("/deleteStudentInfo", "post", "", this.deleteInfo)
    //       .then(res => {
    //         if (res.data == "删除成功") {
    //           alert(res.data);
    //           window.location.reload();
    //         } else {
    //           alert(res.data);
    //           dinp1.value = "";
    //         }
    //       });
    //   } else {
    //     alert("删除学号不能为空");
    //   }
    // }
  }
};
</script>

<style lang='less' scoped>
</style>